@extends('Admin.Index.index')
@section('title')
    商品列表
@endsection
@section('content')
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 产品管理
        <span class="c-gray en">&gt;</span> 产品列表
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    <div class="page-container">
        <div class="text-c"> 日期范围：
            <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin" class="input-text Wdate" style="width:120px;">
            -
            <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })" id="logmax" class="input-text Wdate" style="width:120px;">
            <input type="text" name="" id="" placeholder=" 产品名称" style="width:250px" class="input-text">
            <button name="" id="" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜产品</button>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius">
                <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
            </a>
            <a class="btn btn-primary radius" onclick="product_add('添加产品','goods_add')" href="javascript:;">
                <i class="Hui-iconfont">&#xe600;</i> 添加产品
            </a>
        </span>
            <span class="r">共有数据：<strong>54</strong> 条
        </span>
        </div>
        <div class="mt-20">
            <table class="table table-border table-bordered table-bg table-hover table-sort">
                <thead>
                <tr class="text-c">
                    <th width="40"><input name="" type="checkbox" value=""></th>
                    <th width="40">ID</th>
                    <th width="60">缩略图</th>
                    <th width="100">产品名称</th>
                    <th >描述</th>
                    <th width="100">类别</th>
                    <th width="100">单价</th>
                    <th width="100">商品属性</th>
                    <th width="60">发布状态</th>
                    <th width="60">热销状态</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
                <tbody>
                {{--<tr class="text-c va-m">--}}
                    {{--<td><input name="" type="checkbox" value=""></td>--}}
                    {{--<td>001</td>--}}
                    {{--<td><a onClick="product_show('哥本哈根橡木地板','product-show.html','10001')" href="javascript:;"><img width="60" class="product-thumb" src="/img/product/5345.jpg"></a></td>--}}
                    {{--<td class="text-l"><a style="text-decoration:none" onClick="product_show('哥本哈根橡木地板','product-show.html','10001')" href="javascript:;"><img title="国内品牌" src=""> <b class="text-success">圣象</b> 哥本哈根橡木地板KS8373</a></td>--}}
                    {{--<td class="text-l">原木的外在,实木条形结构,色泽花纹自然,写意;款式设计吸取实木地板的天然去雕饰之美,在视觉上给人带来深邃联想.多款产品适合搭配不同的风格的室内装饰;功能流露出尊贵典雅的大气韵味。</td>--}}
                    {{--<td class="text-c">标签-分类-属性</td>--}}
                    {{--<td><span class="price">356.0</span> 元/平米</td>--}}
                    {{--<td class="td-status"><span class="label label-success radius">已发布</span></td>--}}
                    {{--<td class="td-manage"><a style="text-decoration:none" onClick="product_stop(this,'10001')" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a> <a style="text-decoration:none" class="ml-5" onClick="product_edit('产品编辑','product-add.html','10001')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a> <a style="text-decoration:none" class="ml-5" onClick="product_del(this,'10001')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a></td>--}}
                {{--</tr>--}}
                @foreach($data  as $v )
                    <tr class="text-c va-m">
                        <td><input name="" type="checkbox" value=""></td>
                        <td data-id="{{$v->goods_id}}">{{$v->goods_id}}</td>
                        <td><a onClick="product_show('{{$v->goods_name}}','product-show.html','10001')" href="javascript:;"><img width="60" class="product-thumb" src="{{$v->img_src}}"></a></td>

                        <td class="text-l">
                            <a style="text-decoration:none" onClick="product_show('哥本哈根橡木地板','product-show.html','10001')" href="javascript:;">
                                {{--<img title="国内品牌" src=""> <b class="text-success">圣象</b> --}}
                                {{$v->goods_name}}
                            </a>
                        </td>
                        <td class="text-l">{{$v->goods_describe}}</td>
                        <td class="text-c">{{$v->tag_name}}-{{$v->c_name}}</td>
                        <td><span class="price">{{$v->price}}</span> 元/单位</td>
                        <td><button class="btn btn-primary size-MINI radius " type="button" id="show-property"> 查看属性</button> </td>
                        <td class="td-status">
                            @if($v->status === 1  )
                                <span class="label label-success radius" >已上架 </span>
                            @else

                                <span class="label label-defaunt radius" >已下架 </span>
                            @endif
                        </td>
                        <td class="">
                            @if($v->hot === 1  )
                                <span class="label label-danger radius " style="cursor: pointer" onClick="change_to_default(this,'{{$v->goods_id}}')" >热销 </span>
                            @else

                                <span class="label label-secondary radius " style="cursor: pointer" onClick="change_to_hot(this,'{{$v->goods_id}}')" >正常 </span>
                            @endif
                        </td>
                        <td class="td-manage">
                            @if($v->status === 1  )
                                <a style="text-decoration:none" onClick="product_stop(this,'{{$v->goods_id}}')" href="javascript:;" title="下架">
                                    <i class="Hui-iconfont" data-s="1" >&#xe6de;</i>
                                </a>
                            @else
                                <a style="text-decoration:none" onClick="product_start(this,'{{$v->goods_id}}')" href="javascript:;" title="上架">
                                    <i class="Hui-iconfont" data-s="0">&#xe603;</i>
                                </a>
                            @endif
                            <a style="text-decoration:none" class="ml-5" onclick="product_edit('产品编辑','goods_edit/{{$v->goods_id}}')" href="javascript:;" title="编辑">
                                <i class="Hui-iconfont">&#xe6df;</i>
                            </a>
                            <a style="text-decoration:none" class="ml-5" onClick="product_del(this,'{{$v->goods_id}}')" href="javascript:;" title="删除">
                                <i class="Hui-iconfont">&#xe6e2;</i>
                            </a>
                        </td>

                    </tr>
                @endforeach
                </tbody>
            </table>

            {!! $data->render() !!}
        </div>
    </div>

@endsection

@section('js_script')
    <script type="text/javascript" src="/Admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="/Admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="/Admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="/Admin/lib/laypage/1.2/laypage.js"></script>
    <script type="text/javascript">
        $(function () {
            //TODO 查看属性
            $('#show-property').click(function () {
                console.log(222);
            });
        });

        function change_to_hot(obj, id) {
            layer.confirm('确认要修改为热销吗？',function(index){
                $.post('change_hot_status',{goods_id:id,status:1},function (e) {
                    console.log(e);
                    if (e.status)
                    {
                        $(obj).parent().html('<span class="label label-danger radius " style="cursor: pointer" onClick="change_to_default(this,'+id+')" >热销 </span>');
                        $(obj).remove();
                        layer.msg(e.info,{icon: 6,time:1000});
                    }else {
                        layer.msg(e.info,{icon: 5,time:1000});
                    }
                })
            });
        }

        function change_to_default(obj, id) {
            layer.confirm('确认要修改为正常吗？',function(index){
                $.post('change_hot_status',{goods_id:id,status:0},function (e) {
                    console.log(e);
                    if (e.status)
                    {
                        $(obj).parent().html('<span class="label label-secondary radius " style="cursor: pointer" onClick="change_to_hot(this,'+id+')" >正常 </span>');
                        $(obj).remove();
                        layer.msg(e.info,{icon: 6,time:1000});
                    }else {
                        layer.msg(e.info,{icon: 5,time:1000});
                    }
                })
            });
        }


        /*产品-发布*/
        function product_start(obj,id){
            layer.confirm('确认要发布吗？',function(index){
//
                console.log($(obj));
                $.post('change_goods_status',{goods_id:id,status:1},function (e) {
                    console.log(e);
                    if (e.status)
                    {
                        $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_stop(this,'+id+')" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a>');
                        $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已上架</span>');
                        $(obj).remove();
                        layer.msg(e.info,{icon: 6,time:1000});
                    }else {
                        layer.msg(e.info,{icon: 5,time:1000});
                    }
                })
            });
        }

        /*产品-下架*/
        function product_stop(obj,id){
            layer.confirm('确认要下架吗？',function(index){
                console.log($(obj).attr("data-status"));
                $.post('change_goods_status',{goods_id:id,status:0},function (e) {
                    console.log(e);
                    if (e.status)
                    {
                        $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_start(this,'+id+')" href="javascript:;" title="发布"><i class="Hui-iconfont">&#xe603;</i></a>');
                        $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
                        $(obj).remove();
                        layer.msg(e.info,{icon: 6,time:1000});
                    }else {
                        layer.msg(e.info,{icon: 5,time:1000});
                    }
                })
            });
        }

        /*产品-编辑*/
        function product_edit(title,url){
            var index = layer.open({
                type: 2,
                title: title,
                content: url
            });
            layer.full(index);
        }

        /*产品-删除*/
        function product_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                $.ajax({
                    type: 'POST',
                    url: 'goods_del/'+id,
                    dataType: 'json',
                    success: function(data){
                        console.log(data);
//                    $(obj).parents("tr").remove();
//                    layer.msg('已删除!',{icon:1,time:1000});
                    },
                    error:function(data) {
                        console.log(data.msg);
                    },
                });
            });
        }

        /*查看-大图*/
        function product_show(title,url,id){
            var index = layer.open({
                type: 2,
                title: title,
                content: url
            });
            layer.full(index);
        }

    </script>
@endsection

